<template>
    <p>Vuex</p>
    <p>count:{{ this.$store.state.count }}</p>
    <p>count:{{ count }}</p>
    <p>test:{{ test }}</p>
    <p>Getters ==============</p>
    <p>countAddFive:{{ this.$store.getters.countAddFive }}</p>
    <p>countAddFive:{{ countAddFive }}</p>
    <p>countAddFiveAddTen:{{ countAddFiveAddTen }}</p>
    <p>Mutations ====================</p>
    <button @click="addMut">addMut</button>
    <button @click="addPlayloadMut">addPlayloadMut</button>
    <button @click="add">add</button>
    <button @click="addCommit">addCommit</button>
    <button @click="addAlias">addAlias</button>
    <p>Action==========================</p>
    <button @click="addActionMut">addActionMut</button>
    <button @click="asyncAddActionMut">asyncAddActionMut</button>
    <button @click="asyncPlayloadActionMut">asyncPlayloadActionMut</button>
    <button @click="addAction">addAction</button>
    <button @click="addActionDispatch">addActionDispatch</button>
    <button @click="addActionAlias">addActionAlias</button>

   <h1>命名空间</h1>
   <p>无命名空间</p>
   <p>访问 模块A的state{{ $store.state.a.countA }}</p>
   <p>访问 模块A的getters{{ $store.getters.countAA }}</p>
   <p>有无命名空间</p>
   <p>访问 模块B的state{{ $store.state.b.countB }}</p>
   <p>访问 模块B的getters{{ $store.getters['b/countBB'] }}</p>

   <h1>Vuex module</h1>
   <button @click="commitIncreawseA">触发-moduleA-mutations</button>
   <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
   <button @click="commitIncreawseB">触发-moduleB-mutations</button>
   <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>


   <h1>MapXXX</h1>
    <h2>全局</h2>
    <p>state</p>
    <p>countA:{{ countA }} </p>
    <p>getters</p>
    <p>countAA:{{ countAA }}</p>
    <p>mutations</p>
    <button @click="increaseA">触发increaseA</button>
    <p>actions</p>
    <button @click="asyncIncreaseA">触发asyncIncreaseA</button>

    <h2>局部</h2>
    <p>moduleB state</p>
    <p>countB::{{ countB }}</p>

    <p>moduleB mutations</p>
    <button @click="increaseB">触发increaseB</button>



</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from "vuex";
export default {
    computed:{
        // count(){
        //     return this.$store.count
        // }
        //数组形式
        ...mapState(['count','test',]),
        ...mapGetters(['countAddFive','countAddFiveAddTen']),

         // 映射模块A的countA
         ...mapState({
            countA: state => state.a.countA
          }),
         // 映射全局getters
         ...mapGetters(['countAA']),

          // 映射模块B的state
          ...mapState('b',['countB'])


    },
    methods:{
        addMut(){this.$store.commit('add')
         },
         addPlayloadMut(){
            this.$store.commit({
                type:'addPlayload',
                num:10
            })
         },
        //  ...mapMutations(['add','addPlayload']),
         addCommit(){
            this.addPlayload({num:20})
         },
         ...mapMutations({
            add:'add',
            addAlias:'add',
            addPlayload:'addPlayload',
         }),
         addActionMut(){
            this.$store.dispatch('addAction')
         },
         asyncAddActionMut(){
            this.$store.dispatch('asyncAddAction')
         },
         asyncPlayloadActionMut(){
            this.$store.dispatch('asyncAddPlayloadAction',{num:20})
         },
        //  ...mapActions(['addAction','asyncAddPlayloadAction']),
         addActionDispatch(){
            this.asyncAddPlayloadAction({num:30})
         },
         ...mapActions({
            addAction:'addAction',
            addActionAlias:'addAction', 
            asyncAddPlayloadAction:'asyncAddPlayloadAction'

         }),

         //出发模块中的内容
         commitIncreawseA(){
            this.$store.commit('increaseA')
         },
         commitAsyncIncreaseA(){
            this.$store.dispatch('asyncIncreaseA')
         },
         commitIncreawseB(){
            this.$store.commit('b/increaseB')
         },
         commitAsyncIncreaseB(){
            this.$store.dispatch('b/asyncIncreaseB')
         },
         // 映射全局的muations
        ...mapMutations(['increaseA']),
        // 映射全局的actions
        ...mapActions(['asyncIncreaseA']),
        
        // 映射模块B的mutations
        ...mapMutations('b', ['increaseB'])

    },
    mounted(){
        console.log(this.$store);
    }
}
</script>